<template>
    <div style="height: 100%;">
        <Header :title="t('home.Mine.deposit')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getRechargeList">
                    <van-cell v-for="(item, index) in list" :key="item.id">
                        <div class="li">
                            <div class="left">
                                {{ item.userName }}
                            </div>
                            <div class="right">
                                <div class="top">+ {{ item.amt }}</div>
                                <div class="bottom">{{ update(item.createTime) }}</div>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { userApi } from '@/api'
import { ref, onMounted, reactive } from 'vue'
const router = useRouter()
const { t } = useLanguage()
function goBack() {
    router.go(-1)
}



const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const postData = reactive({
    pageNum: 1,
    pageSize: 10
})

async function getRechargeList() {
    const { code, data } = await userApi.getRechargeList(postData)
    if (code == 20000) {
        postData.pageNum++
        if (refreshing.value) {
            postData.pageNum = 1
            list.value = []
            refreshing.value = false
        }

        data.records.map(item => list.value.push(item))
        loading.value = false

        if (data.records.length < postData.pageSize) {
            finished.value = true
        }
    }
}

function onRefresh() {
    finished.value = false
    loading.value = true
    getRechargeList()

}

const update = (date) => {
    const time = new Date(date).getTime()
    const second = new Date(date).getSeconds()
    const minute = new Date(date).getMinutes()
    const hour = new Date(date).getHours()
    const mounth = new Date(date).getMonth() + 1
    const year = new Date(date).getFullYear()

    const newDate = `${year}-${mounth} ${hour}:${minute}:${second}`
    return newDate
}

</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

.li {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        font-size: 22px;
        color: #000;
    }

    .right {
        .top {
            font-size: 20px;
            color: #F44336;
        }
    }
}
</style>